/*
 * @Author: 涵崽
 * @Date: 2023-11-06 10:16:55
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2023-11-06 10:34:31
 * @Description: 自动监听用户当前窗口大小(每次执行方法前先清除定时器。一段时间后改变html字体大小，)
 *
 * 注意！： 此文件不能直接修改body的字体大小，否则会出现bug。比如给某个元素设置rem单位时不会实现响应式
 *
 * 此方法配合"px to rem"插件 效果更佳！！！
 *
 * 使用方法：在mian.js中引入
 * import './resizeHandler.js';
 *
 * 默认宽高1920 * 1080
 * 默认字体大小16px
 *
 */

let resizeTimer; // 定时器

function resizeHandler() {
  clearTimeout(resizeTimer); // 清除之前的定时器

  resizeTimer = setTimeout(function () {
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    let html = document.getElementsByTagName("html")[0];

    let designWidth = 1920; // 设计稿的宽度
    let designHeight = 1080; // 设计稿的高度
    let defaultFontSize = 16; // 当前默认字体大小

    let fontSize = Math.min(
      (width / designWidth) * defaultFontSize,
      (height / designHeight) * defaultFontSize
    );

    html.style.fontSize = fontSize + "px";
  }, 300); // 延迟执行代码的时间（毫秒）
}

window.addEventListener("resize", resizeHandler);
resizeHandler();
